/* eslint-disable no-unused-vars */
<template>
  <table class="it-table-header" style="width: 100%">
    <col-group :cols="headerList"></col-group>
    <thead class="it-table-header-thead">
      <tr>
        <th
          v-for="(item, index) in headerList"
          :key="`it-table-thead-${index}`"
          :class="thClass(item)"
        >
          {{ item.label }}
        </th>
      </tr>
    </thead>
  </table>
</template>

<script setup>
import ColGroup from './ColGroup.vue'

defineProps({
  headerList: { type: Array, default: () => [] },
})

const thClass = (item) => {
  let align = `text-${item['headerAlign'] || item['align'] || 'left'}`

  let name = [align]
  return name
}
</script>

<style scoped>
.it-table-header-thead {
  height: 52px;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  box-shadow: 0px 2px 4px rgba(32, 110, 242, 0.2);
  border-radius: 0px;
  font-size: 16px;
  color: #00165d;
}
</style>
